<!-- 
  功能点：
    1. 渲染出来验证码
    2. 点击能够刷新
    3. v-model 绑定 captchaId
 -->

 <template>
    <div class="captcha" v-html="svg" @click="refresh"></div>
  </template>
  
  <script>
  import { getCaptcha } from "@/api/login.js";
  
  export default {
    name: "Captcha",
  
    props: ["modelValue"],
  
    emits: ["update:modelValue"],
  
    data() {
      return {
        svg: "",
      };
    },
  
    methods: {
      refresh() {
        getCaptcha()
          .then((data) => {
            this.svg = data.data;
            this.$emit("update:modelValue", data.captchaId);
          })
          .catch(() => {
            console.log("catch");
          });
      },
    },
  
    created() {
      this.refresh();
    },
  };
  </script>
  
  <style scoped>
  .captcha {
    width: 100px;
    height: 30px;
    cursor: pointer;
    background-color: #000;
  }
  
  .captcha :deep(svg) {
    display: block;
    width: 100%;
    height: 100%;
  }
  </style>
  
